<template>
    <div class="message">
        <ul v-if="dataLoaded" v-scroll-bottom="chat.list">
        <transition-group name="list" tag="p">
            <li class="list-item" v-for="item in chat.list" :key="item.chat_index">
                <p class="time">
                    <span>{{ timetag(item) }}</span>
                </p>
                <div class="main" :class="{ self: isMyText(item) }">
                    <img class="avatar" :src="avatar(item)" />
                    <div class="text">
                        <span class="name">{{nickname(item)}}</span>
                        {{ item.chat_text }}
                    </div>
                </div>
            </li>
        </transition-group>
        </ul>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            userLoaded: false,
            listLoaded: false,
            timedLoader: 0
        }
    },
    created () {
        if(!this.room || !this.room.room_name) {
            this.$router.push('/')
        } else {
            this.$store.dispatch('chatRoom', () => {
                this.userLoaded = true
                this.$store.commit('webar', {
                    show: 'chat',
                    nav: {
                        title: this.room.room_name,
                        right: {
                            to: {name: 'room'},
                            icon: 'ucenter-outline'
                        }
                    },
                    handleContent: this.handleContent
                })
            })
            this.$store.dispatch('chatList', () => {
                this.listLoaded = true
            })
            this.timedLoader = setInterval(() => {
                if(this.dataLoaded) {
                    this.$store.dispatch('chatList')
                }
            }, 3000)
        }
    },
    beforeDestroy () {
        clearInterval(this.timedLoader)
    },
    computed: {
        dataLoaded () {
            return this.userLoaded  && this.listLoaded
        },
        room () {
            return this.$store.getters.chatRoom
        },
        chat () {
            return this.$store.getters.chatList
        }
    },
    methods: {
        avatar (item) {
            l = _.filter(this.$store.getters.chatUsers.list, {user_id: item.user_id})
            if(l[0]) {
                return l[0].user_image ? l[0].user_image : 'assets/img/default/avatar.jpg'
            }
            return 'assets/img/default/staff.png'
        },
        nickname (item) {
            l = _.filter(this.$store.getters.chatUsers.list, {user_id: item.user_id})
            if(l[0]) {
                return l[0].user_name
            }
        },
        isMyText (item) {
            myid = this.$store.getters.userID
            return myid == item.user_id
        },
        timetag (item) {
            preItemTime = this.preTime || new Date().getTime()/1000
            delta = item.chat_index - preItemTime
            this.preTime = item.chat_index
            if(delta <= 600) {
                return ''
            } else if(delta > 10800) {
                return item.op_date
            }else if(item.op_date.startsWith(moment().format('YYYY-MM-DD'))) {
                if(new Date().getTime()/1000 - item.chat_index < 180){
                    return '刚刚'
                } else {
                    return item.op_date.substr(10)
                }
            } else {
                return item.op_date
            }
        },
        handleContent (text) {
            this.$store.dispatch('chatSend', text)
        }
    },
    directives: {
        // 发送消息后滚动到底部
        'scroll-bottom' (el) {
            Vue.nextTick(() => {
                document.querySelector('#scrollView').scrollTop = el.clientHeight;
            });
        }
    }
}
</script>

<style scoped>
.message {
    padding: 0rem .15rem;
    overflow-y: scroll;
}
    li {
        margin-bottom: .15rem;
    }
    .time {
        margin: .1rem 0;
        text-align: center;
    }
    .time > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
    .avatar {
        float: left;
        margin: 0 .1rem 0 0;
        border-radius: .2rem;
        width: .8rem;
        height: .8rem;
    }
    .text {
        display: inline-block;
        position: relative;
        padding: 0 .1rem;
        margin-top: .2rem;
        max-width: calc(100% - 2rem);
        min-height: .3rem;
        line-height: 2.5;
        font-size: .25rem;
        text-align: left;
        word-break: break-word;
        background-color: #fff;
        border-radius: .1rem;
        box-shadow: 1px 1px 5px #888888;
    }
    .text:before {
            content: " ";
            position: absolute;
            top: .1rem;
            right: 100%;
            border: .1rem solid transparent;
            border-right-color: #fff;
        }
    .self {
        text-align: right;
    }
    .self    .avatar {
            float: right;
            margin: 0 0 0 .1rem;
        }
    .self    .text {
            background-color: #b2e281;
            margin-top: .1rem;
        }
    .self .text:before {
                right: inherit;
                left: 100%;
                border-right-color: transparent;
                border-left-color: #b2e281;
            }
.text .name {
    position: absolute;
    line-height: .1rem;
    font-size: .2rem;
    color: #666;
    top: -.2rem;
    left: 0rem;
    min-width: 2rem;
}
.self .text .name {
    display: none;
}
.list-item {
    display: block;
    min-height: 1rem;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>
